<template>
  <div class="reserve_time" v-loading="loading">
    <div class="reserve_time_con" v-for="(time,index) in timeList" :key="index">
      <div class="reserve_title">
        <el-checkbox
          :indeterminate="isIndet[index]"
          v-model="checkAll[index]"
          @change="handleCheckAllChange(index)"
        >{{time.label}}(全选)</el-checkbox>
      </div>
      <el-checkbox-group v-model="data[index]" @change="handleCheckedTimesChange(index)">
        <el-checkbox v-for="t in time.data" :key="t" :label="t">{{t}}</el-checkbox>
      </el-checkbox-group>
    </div>

    <div style="width: 100%; display: flex;">
      <el-button type="primary" size="small" style="margin:20px auto 0" @click="save_edit">保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "reserve_time",
  data() {
    return {
      loading: false,
      timeList: {
        morning: {
          label: "上午时段",
          data: ["09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00"]
        },
        afternoon: {
          label: "下午时段",
          data: [
            "12:30",
            "13:00",
            "13:30",
            "14:00",
            "14:30",
            "15:00",
            "15:30",
            "16:00",
            "16:30",
            "17:00",
            "17:30"
          ]
        },
        night: {
          label: "晚上时段",
          data: [
            "18:00",
            "18:30",
            "19:00",
            "19:30",
            "20:00",
            "20:30",
            "21:00",
            "21:30",
            "22:00"
          ]
        }
      },
      data: {
        morning: [],
        afternoon: [],
        night: []
      },
      checkAll: {
        morning: false,
        afternoon: false,
        night: false
      },
      isIndet: {
        morning: false,
        afternoon: false,
        night: false
      }
    };
  },
  props: {
    editId: {
      type: [String, Number],
      number: 0
    }
  },
  components: {},
  mounted() {
    this.getDetails(this.editId);
  },
  computed: {
    get_id() {
      return this.editId;
    }
  },
  watch: {
    get_id(old, after) {
      this.getDetails(this.editId);
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.data[val] = this.checkAll[val] ? this.timeList[val]["data"] : [];
      this.isIndet[val] = false;
    },
    handleCheckedTimesChange(val) {
      let count = this.data[val].length;
      this.checkAll[val] = count === this.timeList[val]["data"].length;
      this.isIndet[val] =
        count > 0 && count < this.timeList[val]["data"].length;
    },
    save_edit() {
      for (var i in this.data) {
        this.data[i].sort();
      }
      var params = {};
      params.id = this.editId;
      params.reserve_time = JSON.stringify(this.data);
      this.$api.getUser.reserve_store_savetime(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "编辑成功" });
          this.$emit("closeDialog");
        } else {
          this.$fnc.alertError(res.data.result); //失败弹出框
        }
      });
    },
    getDetails(id) {
      var data = {};
      data["id"] = id;
      this.$api.getUser.reserve_store_edit(data).then(res => {
        if (res.data.code == 200) {
          var result = res.data.result;
          if (result.reserve_time == null || result.reserve_time == "") {
            for (let i in this.data) {
              this.data[i] = this.timeList[i]["data"];
              this.checkAll[i] = true;
              this.isIndet[i] = false;
            }
          } else {
            this.data = JSON.parse(res.data.result.reserve_time);
            for (let i in this.data) {
              this.handleCheckedTimesChange(i);
            }
          }
        }
      });
    }
  }
};
</script>
<style  scoped>
.reserve_time {
  width: 100%;
}
.reserve_time_con {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 30px;
  padding: 4px;
}
.reserve_title {
  width: 100%;
  margin-bottom: 3px;
}
</style>
